import React from 'react'
import { FlatList, StyleSheet, Text, View } from 'react-native'


/* 
性能完全优于 scrollview 的列表组件 FlatList

属性

- renderItem           渲染data里的数据,必需参数      
- data                 列表数据,必需参数                接收参数 普通数组  (如果是更复杂的数据类型 那么使用底层组件 VirtualizedList)
- horizontal           排列方向                         设置为true则变为水平列表,默认false。
- getItem              获取每个Item
- getItemCount         获取item数量
- initialNumToRender   初始化渲染数据的数量
- initialScrollIndex   指定渲染开始的item index
- keyExtractor         为给定的item生成key
- numColumns           在垂直模式下使用多列布局。
- columnWrapperStyle   numColumns大于1时，设置每行的样式
- refreshing           在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号
- onRefresh            会在头部生成RefreshControl控制器 可以下拉刷新”的功能
- getItemLayout        如果知道行高可以用此方法节省动态计算行高的开销。

- ItemSeparatorComponent   分割线组件,不会出现在开始和最后。
- ListFooterComponent      结尾组件
- ListHeaderComponent      头部组件
- ListEmptyComponent       列表为空时渲染的组件


建议给定 getItemLayout 
- scrollToEnd()         滚动到底部
- scrollToIndex()       滚动到指定index的item
- scrollToItem()	      滚动到指定item
- scrollToOffset()     	滚动指定距离

*/

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];


export default function FlatListDemo() {

  const renderItem = ({item}:any) => {
    return (
      <Text style={styles.txt}>{`List item ${item}`}</Text>
    );
  }

  const ListHeader = (
    <View style={styles.header}>
      <Text style={styles.extraTxt}>列表头部</Text>
    </View>
  );

  const ListFooter = (
    <View style={[styles.header, styles.footer]}>
      <Text style={styles.extraTxt}>列表尾部</Text>
    </View>
  );

  const ListEmpty = (
    <View style={styles.listEmpty}>
      <Text style={styles.extraTxt}>暂时无数据哦～</Text>
    </View>
  );

  const ItemSeparator = ():any => {
    return (
      <View style={styles.separator} />
    )
  }


  return (
    <FlatList
      style={styles.flatlist}
      data={data}
      renderItem={renderItem}
      keyExtractor={(_, index) => `item-${index}`}
      contentContainerStyle={styles.containerStyle} // 内层容器的样式
      showsVerticalScrollIndicator={false}  // 不显示滚动条
      initialNumToRender={15}       // 初始化渲染个数
      inverted={false}    // 翻转滚动方向
      keyboardDismissMode='on-drag'  // 隐藏键盘
      keyboardShouldPersistTaps='handled'
      ItemSeparatorComponent={ItemSeparator()}
      ListHeaderComponent={ListHeader}
      ListFooterComponent={ListFooter}
      ListEmptyComponent={ListEmpty}
      onScroll={(event) => {
        console.log(event.nativeEvent.contentOffset.y);
      }}
    >


    </FlatList>
  )
}


const styles = StyleSheet.create({
  flatlist: {
    width: '100%',
    height: '100%',
  },
  txt: {
    width: '100%',
    height: 56,
    fontSize: 24,
    color: 'black',
    textAlignVertical: 'center',
  },
  txt2: {
    width: 200,
    height: 200,
    fontSize: 24,
    color: 'black',
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  containerStyle: {
    paddingHorizontal: 16,
    paddingTop: 20,
    backgroundColor: '#F5F5F5'
  },
  header: {
    width: '100%',
    height: 48,
    backgroundColor: '#00ff0030',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    backgroundColor: '#ff000030',
  },
  listEmpty: {
    width: '100%',
    height: 400,
    justifyContent: 'center',
    alignItems: 'center',
  },
  extraTxt: {
    fontSize: 20,
    color: '#666666',
    textAlignVertical: 'center',
  },
  separator: {
    width: '100%',
    height: 2,
    backgroundColor: '#D0D0D0',
  },
});

